<template>
  <div class="home">
    <SliderNav :class="[isMenu ? mmCurrent : '']" />

    <div class="main" :class="[isMenu ? lf8 : '']">
      <header>
        <div @click="openSliderMenu" class="header-left">
          <i class="iconfont icon-other"></i>
        </div>
        <div class="header-center"> 任印网－联合创想企业旗下品牌 </div>
        <router-link class="header-right" tag="div" to="/shopping">
          <i class="iconfont icon-publishgoods_fill"></i>
        </router-link>
      </header>
      <!-- 主要内容部分 -->
      <section>
        <!-- 图片轮播 -->
        <div class="swiper-container focus">
          <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="../../assets/img/lunbo.jpg" alt=""></div>
            <div class="swiper-slide"><img src="../../assets/img/lunbo.jpg" alt=""></div>
          </div>
        </div>
        <!-- 详细列表 -->
        <div class="content-wp">
          <!-- 搜索 -->
          <div class="search-wp">
            <div class="search-wapper">
              <router-link class="searchBtn" tag="button" to="/search">搜本站商品</router-link>
              <div class="search-icon">
                <i class="iconfont icon-search"></i>
              </div>
            </div>
            <!-- <router-link class="search-wapper" tag="div" to="/search">
                            <button class="searchBtn">搜本站商品</button>
                            <div class="search-icon">
                                <i class="iconfont icon-search"></i>
                            </div>
                        </router-link> -->
          </div>
          <!-- 导航列表 -->
          <div class="category">
            <ul class="category-row">
              <router-link tag="li" to="/classify">
                <div class="category-icon-wp">
                  <img src="../../assets/img/item_pic/item_pic1.png" alt="">
                </div>
                全部分类
              </router-link>
              <li>
                <div class="category-icon-wp">
                  <img src="../../assets/img/item_pic/item_pic2.png" alt="">
                </div>
                预售活动
              </li>
              <router-link tag="li" to="/login">
                <div class="category-icon-wp">
                  <img src="../../assets/img/item_pic/item_pic3.png" alt="">
                </div>
                个人中心
              </router-link>
              <li>
                <div class="category-icon-wp">
                  <img src="../../assets/img/item_pic/item_pic4.png" alt="">
                </div>
                分销中心
              </li>
            </ul>
            <ul class="category-row">
              <li>
                <div class="category-icon-wp">
                  <img src="../../assets/img/item_pic/item_pic5.png" alt="">
                </div>
                联系我们
              </li>
              <li>
                <div class="category-icon-wp">
                  <img src="../../assets/img/item_pic/item_pic6.png" alt="">
                </div>
                团购
              </li>
              <li>
                <div class="category-icon-wp">
                  <img src="../../assets/img/item_pic/item_pic7.png" alt="">
                </div>
                积分商城
              </li>
              <router-link tag="li" to="/shopping">
                <div class="category-icon-wp">
                  <img src="../../assets/img/item_pic/item_pic8.png" alt="">
                </div>
                购物车
              </router-link>
            </ul>
          </div>
          <!-- 10px的空格 -->
          <div class="blank"></div>
          <!-- 特色市场 -->
          <div class="mainCon">
            <dl class="wholeTime">
              <dt class="wholePoint surper clearfix">
                <span class="san fl">
                  <i></i>
                  特色市场
                </span>
              </dt>
              <dd>
                <div class="superBan clearfix">
                  <div class="featurBan1 fl">
                    <span>
                      <img src="../../assets/img/tesesc1.png" alt="">
                    </span>
                    <span>
                      <img src="../../assets/img/tesesc2.png" alt="">
                    </span>
                  </div>
                  <div class="featurBan2 fl">
                    <span>
                      <img src="../../assets/img/tesesc3.png" alt="">
                    </span>
                  </div>
                </div>
              </dd>
            </dl>
          </div>
          <!-- 10px的空格 -->
          <div class="blank"></div>
          <!-- 热门市场 -->
          <div class="mainCon">
            <dl class="wholeTime">
              <dt class="wholePoint surper clearfix">
                <span class="san fl">
                  <i></i>
                  热门市场
                </span>
              </dt>
              <dd>
                <div class="superBan brandWallBan clearfix">
                  <span>
                    <img src="../../assets/img/hotsc.jpg">
                  </span>
                  <span>
                    <img src="../../assets/img/hotsc.jpg">
                  </span>
                  <span>
                    <img src="../../assets/img/hotsc.jpg">
                  </span>
                  <span>
                    <img src="../../assets/img/hotsc.jpg">
                  </span>
                  <span>
                    <img src="../../assets/img/hotsc.jpg">
                  </span>
                  <span>
                    <img src="../../assets/img/hotsc.jpg">
                  </span>
                  <span>
                    <img src="../../assets/img/hotsc.jpg">
                  </span>
                  <span>
                    <img src="../../assets/img/hotsc.jpg">
                  </span>
                  <span>
                    <img src="../../assets/img/hotsc.jpg">
                  </span>
                </div>
              </dd>
            </dl>
          </div>
          <!-- 10px的空格 -->
          <div class="blank"></div>
          <!-- 精品推荐 -->
          <div class="item_show_box1 box1 region">
            <p>
              <span class="titico"></span>精品推荐
              <span class="titmore">
                <!-- <span @click="jumpJpListPage" class="titmore"> -->
                <i class="iconfont icon-enter"></i>
              </span>
            </p>
            <div class="flex flex-f-row">
              <div class="goodsItem flex_in">
                <img src="../../assets/img/jinptj.jpg" alt="广告纸杯">
                <div style="text-align:center;">
                  <span class="price_s"> ￥
                    <span>0</span>
                  </span>
                  <br>广告纸杯
                </div>
              </div>
              <div class="goodsItem flex_in">
                <img src="../../assets/img/jinptj.jpg" alt="广告纸杯">
                <div style="text-align:center;">
                  <span class="price_s"> ￥
                    <span>0</span>
                  </span>
                  <br>广告纸杯
                </div>
              </div>
              <div class="goodsItem flex_in">
                <img src="../../assets/img/jinptj.jpg" alt="广告纸杯">
                <div style="text-align:center;">
                  <span class="price_s"> ￥
                    <span>0</span>
                  </span>
                  <br>广告纸杯
                </div>
              </div>
            </div>
          </div>
          <!-- 10px的空格 -->
          <div class="blank"></div>
          <!-- 宣传彩页 -->
          <section class="item_show_box1 box1 region">
            <p>
              <span class="titico"></span>{{aTitle}}
              <span @click="goXccyClassifyShops" class="titmore">
                <i class="iconfont icon-enter"></i>
              </span>
            </p>
            <div class="flex flex-f-row">
              <div v-for="(item,index) in xccyShopsList" :key="index" class="goodsItem flex_in">
                <router-link :to="`/detail/${item.id}`">
                  <img src="../../assets/img/xuanccy.jpg" alt="景区门票活动入场券设计制作">
                </router-link>
                <div class="textellipsis">
                  <span class="price_s"> ￥{{item.oldprice}} </span>
                  <br> {{item.explains}}
                </div>
              </div>
            </div>
            <ul class="item_tags clearfix">
              <li v-for="(item,index) in xccyList" :key="index">{{item.title}} </li>
            </ul>
          </section>
          <!-- 10px的空格 -->
          <div class="blank"></div>
          <!-- 名片证卡 -->
          <section class="item_show_box1 box1 region">
            <p>
              <span class="titico"></span>{{bTitle}}
              <span @click="goMpzkClassifyShops" class="titmore">
                <i class="iconfont icon-enter"></i>
              </span>
            </p>
            <div class="flex flex-f-row">
              <div v-for="(item,index) in mpzkShopsList" :key="index" class="goodsItem flex_in">
                <router-link :to="`/detail/${item.id}`">
                  <img src="../../assets/img/minpzk.jpg" alt="POP广告展架设计定制">
                </router-link>
                <div class="textellipsis">
                  <span class="price_s"> ￥{{item.oldprice}} </span>
                  <br> {{item.explains}}
                </div>
              </div>
            </div>
            <ul class="item_tags clearfix">
              <li v-for="( item,index ) in mpzkList" :key="index">{{item.title}} </li>
            </ul>
          </section>
        </div>
        <!-- 底部内容 -->
        <div class="content-footer">
          <div class="footer">
            <div class="in">
              <div class="search_box">
                <input name="keywords" type="text" v-model="iptVal" @keyup.enter="iptEnt">
                <i class="iconfont icon-search"></i>
              </div>
              <a class="homeBtn">
                <span class="iconfont icon-homepage_fill"> </span>
              </a>
              <a class="gotop">
                <span class="iconfont icon-packup"> </span>
                <p> TOP </p>
              </a>
            </div>
            <p class="link region">
              <router-link to="/">返回首页</router-link>
              <router-link to="shopping">购物车</router-link>
              <router-link to="login">会员中心</router-link>
              <a> 联系我们 </a>
            </p>
            <p class="region">© 2005-2019 任印网－联合创想企业旗下品牌 版权所有，并保留所有权利。 </p>
            <div class="favLink region">
              <!-- <a href="http://www.xpkj.net"> powered by 众合网络 </a> -->
              <a> powered by 众合网络 </a>
            </div>
          </div>
        </div>
      </section>
    </div>
    <div @click="closeSliderMenu" class="mm-blocker" :class="[isMenu ? showBlocker : '']"></div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'
import '../../assets/css/index.css'
import { mapState, mapMutations, mapActions } from 'vuex'
import SliderNav from './SliderNav'
export default {
  data() {
    return {
      mmCurrent: 'mm-current',
      isMenu: false,
      showBlocker: 'showBlocker',
      lf8: 'lf8',
      aTitle: '宣传彩页',
      aId: '',
      xccyList: [],
      bTitle: '名片证卡',
      bId: '',
      mpzkList: [],
      xccyShopsList: [],
      mpzkShopsList: [],
      iptVal: '',
      renderObj: []
    }
  },
  mounted() {
    this.getPartData()
    // 图片轮播
    var myswiper = new Swiper('.swiper-container', {
      autoplay: true,
      speed: 300,
      loop: true
    })
  },
  methods: {
    iptEnt() {
      this.toSearch(this.iptVal).then(arr => {
        this.$router.push({
          name: 'Searchshops',
          params: { obj: JSON.stringify(arr) }
        })
      })
    },
    ...mapMutations('sliderNav', ['changeIsBMenu']),
    //   获取所有类别
    ...mapActions('home', ['getShopsData']),
    ...mapActions('sliderNav', ['getTypes']),
    ...mapActions('search', ['toSearch']),
    goXccyClassifyShops() {
      this.$router.push('category/' + this.aId)
    },
    goMpzkClassifyShops() {
      this.$router.push('category/' + this.bId)
    },
    // 获取主页一级分类菜单下的部分数据
    getPartData() {
      this.getTypes().then(data => {
        for (let i = 0; i < data.length; i++) {
          // 获取宣传彩页部分数据
          if (data[i].title == this.aTitle) {
            this.xccyList = data[i].children
            this.aId = data[i].id
          }
          // 获取名片证卡部分数据
          if (data[i].title == this.bTitle) {
            this.mpzkList = data[i].children
            this.bId = data[i].id
          }
        }
        // 宣传彩页商品信息的数据
        this.getShopsData({ id: this.aId, page: 6 }).then(data => {
          this.xccyShopsList = data
        })
        // 名片证卡商品信息的数据
        this.getShopsData({ id: this.bId, page: 6 }).then(data => {
          this.mpzkShopsList = data
        })
      })
    },
    // 显示侧边一级导航
    openSliderMenu() {
      this.isMenu = true
      let html = document.getElementsByTagName('html')[0]
      html.className = 'mm-opened mm-background'
    },
    // 关闭侧边导航
    closeSliderMenu() {
      this.changeIsBMenu(false)
      this.isMenu = false
      let html = document.getElementsByTagName('html')[0]
      html.className = ''
    }
    // 跳转至精品推荐列表页面
    // jumpJpListPage() {
    //   this.$router.push("category");
    // }
  },
  components: {
    SliderNav
  }
}
</script>

<style scoped>
.textellipsis {
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
/* 覆盖muse-ui样式 */
*,
:after,
:before {
  -webkit-box-sizing: content-box !important;
  box-sizing: content-box !important;
}
.home {
  height: 100%;
  width: 100%;
}
/* 侧边导航样式 */
.main.lf8 {
  left: 80%;
}
.mm-blocker {
  background: #fff;
  opacity: 0;
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 9999;
  left: 0;
}
.mm-blocker.showBlocker {
  display: block;
  left: 80%;
}
/********************************/

/* 解决打开侧边导航时，显示侧边导航的问题 */
html.mm-background .main {
  background-color: #ebeced;
}
/* 显示导航 */
.mm-menu.mm-current {
  display: block;
}

/********************************************/
/* 图片轮播 */
.swiper-slide > img {
  width: 100%;
}

.main {
  position: absolute;
  left: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  transition: left 0.5s ease;
}
.main header {
  color: #fff;
  display: flex;
  flex-direction: row;
  height: 48px;
  background-color: #ff3838;
  position: relative;
  text-align: center;
  line-height: 48px;
  z-index: 1000;
}
.main section {
  flex-grow: 1;
}

/* 头部导航 */
header i {
  font-size: 30px !important;
}
.header-left {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 48px;
}
.header-center {
  /* text-align: center; */
  flex-grow: 1;
  margin: 0 48px;
  font-size: 16px;
}
.header-right {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 48px;
}

/* 首页图片轮播 */
.focus {
  width: 100%;
  height: auto;
  /* height: 155px; */
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
/* 搜索按钮 */
.search-wp {
  padding: 10px;
}
.search-wapper {
  position: relative;
  height: 40px;
  overflow: hidden;
  border-radius: 15px;
}
.searchBtn {
  position: absolute;
  color: silver;
  font-size: 14px;
  width: 100%;
  height: 100%;
  border: none;
  background-color: #fff;
  text-align: left;
  padding-left: 16px;
  outline: none;
  box-sizing: border-box;
}
.search-icon {
  background-color: #a1a1a1;
  color: #fff;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.search-icon > i {
  font-size: 26px;
}
/* 导航列表 */
.category {
  background-color: #fff;
}
.category-row {
  display: flex;
  flex-direction: row;
}
.category-row li {
  font-size: 12px;
  width: 25%;
  text-align: center;
  margin: 9.6px 0;
  overflow: hidden;
}
.category-icon-wp {
  display: block;
  overflow: hidden;
}
.category-icon-wp {
  border-radius: 50%;
  margin: 0 auto;
  width: 50%;
}
.category-icon-wp img {
  border-radius: 50%;
  width: 100%;
}
/* 10px的空格 */
.blank {
  height: 10px;
  line-height: 10px;
}
/* 特色市场 */
.mainCon {
  background-color: #ededed;
}
.wholeTime {
  background-color: #fff;
  margin: 0;
}
.surper {
  height: 20px;
  background: #fff;
  color: #292929;
}
.wholePoint {
  color: #4a4949;
  padding: 10px;
}
.surper .san {
  border-color: #ff3838;
}
.wholePoint .san {
  border-left: 2px solid #ff4a59;
  font-size: 16px;
  height: 20px;
}
.surper .san i {
  border-left-color: #ff3838;
}
.wholePoint .san i {
  border: 10px solid transparent;
  border-left: 10px solid #ff4a59;
  display: inline-block;
  vertical-align: top;
  font-style: normal;
}
.superBan {
  background: #fff;
  border-top: 1px solid #ededed;
}
.featurBan1 {
  width: 59%;
  border-right: 1px solid #ededed;
}
.featurBan2 {
  width: 40%;
}
.featurBan1 span:first-child {
  border-bottom: 1px solid #ededed;
}
.superBan span {
  display: block;
  font-size: 0px;
}
.featurBan1 img,
.featurBan2 img {
  width: 100%;
  height: auto;
}
.brandWallBan {
  width: 100%;
}
.brandWallBan span {
  float: left;
  width: 33%;
  border-bottom: 1px solid #ededed;
  border-right: 1px solid #ededed;
}
.brandWallBan img {
  width: 100%;
  height: auto;
}
/* 精品推荐 */
.box1 {
  border: 1px solid #e2e2e2;
  background: #ffffff;
}
.item_show_box1 p {
  border-bottom: 1px solid #f0f1f2;
  font-size: 16px;
  line-height: 40px;
  margin-bottom: 8px;
  font-weight: normal;
}
.item_show_box1 p .titico {
  margin-right: 8px;
  padding: 0 2px;
}
.item_show_box1 p .titico {
  background-color: #ff3838;
}
.item_show_box1 p .titmore {
  color: #666;
  float: right;
  margin-right: 12px;
}
.flex-f-row {
  flex-flow: row;
}
.flex {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
.goodsItem {
  width: 30%;
  padding: 5px;
  font-size: 14px;
}
.flex_in {
  -webkit-box-flex: 1;
}
.goodsItem img {
  width: 100%;
  height: auto;
}
.price_s {
  color: #ff3838;
  font-size: 16px;
  display: inline-block;
}
.item_show_box1 .item_tags {
  margin: 10px;
}
.item_show_box1 .item_tags li {
  height: 28.8px;
  line-height: 28.8px;
  border: 1px solid #ececec;
  text-align: center;
  color: #666;
  float: left;
  margin: 6.4px 6.4px 0 0;
  padding: 0 9.6px;
  font-size: 12.8px;
  overflow: hidden;
}
/* 底部内容 */
.footer {
  padding: 0 9.6px 9.6px;
  color: #aaa;
  font-size: 9.6px;
  margin-top: 20px;
}
.footer .in {
  position: relative;
  height: 44.8px;
  margin: 0 -9.6px;
  padding: 0 56px;
  background-color: #b9b9b9;
}
.search_box {
  position: relative;
  top: 6.4px;
  width: 100%;
  background: #fff;
  border-radius: 20px;
  text-align: center;
}
form {
  display: block;
  margin: 0;
}
.search_box input {
  width: 85%;
  height: 32px;
  line-height: normal;
  border: none;
  font-size: 13px;
  outline: none;
}
.search_box i {
  font-size: 24px;
  position: absolute;
  top: -2.6px;
  right: 9.6px;
  width: 20px;
  height: 20px;
  border: none;
  font-weight: bold;
}
.footer .gotop,
.footer .homeBtn {
  background: #a1a1a1;
}
.homeBtn {
  left: 0;
}
.homeBtn,
.footer .gotop {
  position: absolute;
  top: 0;
  width: 44px;
  height: 44px;
  color: #fff;
  font-size: 11px;
}
.homeBtn span {
  font-size: 32px;
  position: absolute;
  left: 4.8px;
  top: -0.2px;
}
.footer .gotop {
  right: 0;
}
.footer .gotop,
.footer .homeBtn {
  background: #a1a1a1;
}
.footer .gotop span {
  font-size: 24px;
  position: absolute;
  left: 27%;
  top: -4.2px;
  width: 20px;
  height: 20px;
}
.footer .gotop p {
  position: absolute;
  bottom: 3.24px;
  left: 7.2px;
  width: 35px;
}
.footer .link {
  line-height: 16px;
  font-size: 11px;
  color: #1ca2e1;
}
.footer .link a {
  display: inline-block;
  margin-top: 4.8px;
  padding: 0 9.6px 0 4.8px;
  border-right: 1px solid #d5d5d5;
  color: #1ca2e1;
}
.footer .link a:last-child {
  border: none;
}
.footer .favLink,
.footer p {
  text-align: center;
  line-height: 20px;
}
.footer .favLink a {
  margin-right: 4.8px;
  color: #aaa;
}
</style>
